[class^='h-'],
[class*=' h-'] {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  // 为什么这样写 font-family
  // 答案见 https://github.com/zenozeng/fonts.css/
  font-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica,
    'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB',
    'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN',
    'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti',
    SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
}

.h-component-container {
  margin: 16px 0;
  .h-component-sample {
    position: relative;
    padding: 32px;
    border: 1px solid #e2ecf4;
    border-radius: 4px 4px 0 0;
    background-color: #fff;
    @media (max-width: 760px) {
      padding: 16px;
    }
  }
  .h-code-container {
    .h-code-wrapper {
      background-color: #f7f7f7;
      overflow-y: hidden;
      max-height: 0;
      padding: 0;
      -webkit-transition-property: all;
      -webkit-transition-duration: 0.5s;
      -webkit-transition-timing-function: ease-in;
      pre {
        padding: 10px;
        border: 1px solid #e2ecf4;
        border-top: none;
      }
    }
    .h-openOrHide {
      display: block;
      padding: 8px 12px;
      color: #69c0ff;
      font-size: 12px;
      text-align: center;
      background-color:#bae7ff ;
      cursor: pointer;
    }
    .h-code-visible {
      max-height: 1000px;
    }
  }
}
code {
  padding: 0.3em 0.5em;
  font-size: 0.9em;
  vertical-align: middle;
  border: 1px solid #ececec;
  border-radius: 2px;
  background-color: #f7f7f7;
}
.h-container {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
    PingFang SC, Hiragino Sans GB, Microsoft YaHei, \\5fae\8f6f\96c5\9ed1, Arial,
    sans-serif;
  h1,
  h2,
  h3,
  h4,
  h5 {
    color: #2c405a;
    font-weight: bold;
  }
  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 18px;
  }
  h2,
  h3 {
    margin-top: 24px;
    margin: 16px 0;
    line-height: 1.5;
  }
  hr {
    margin: 1.2em 0;
    border: 0;
    border-bottom: 1px solid #c5d9e8;
  }
  p {
    color: #3f536e;
    font-size: 14px;
  }
  a:active,
  a:hover {
    color: #1890ff !important;
    outline: 0;
    text-decoration: none;
    border: none;
  }
}
a {
  user-select: none;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.15s;
  -webkit-transition-timing-function: linear;
}
.markdown-body h1,
.markdown-body h2 {
  border-bottom: 1px solid #c5d9e8 !important;
}
.markdown-body a {
  color: #6190e8 !important;
}
